<template>
  <div class="paramterPage">
    <div class="addParamBox" v-if="hasPerm('param:add')">
      <el-button type="primary" size="mini"  @click="addParam">添加参数</el-button>
    </div>
    
    <!-- 表格区域 -->
    <!-- :style="{height: hasPerm('param:add') ? '470px' : '535px' }" -->
    <el-table class="parameterTable" height="470px"  :data="parameterList" border>
      <el-table-column
        label="序号"
        width="60"
        align="center"
      >
       <template slot-scope="scope">
            {{scope.$index + 1}}
        </template></el-table-column>
      <el-table-column prop="paramKey" label="参数项"  align="center"></el-table-column>
      <el-table-column prop="paramName" label="参数名称"  align="center"></el-table-column>
      <el-table-column label="状态" width="100" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.available">
            正常
          </el-tag>
          <el-tag v-else type="danger">
            禁用
          </el-tag>
        </template>
      </el-table-column>      
      <el-table-column label="创建日期" width="240" align="center">
        <template slot-scope="scope">
          {{scope.row.createTime | timeFormat}}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="260" v-if="hasPerm('param:upa') ||hasPerm('param:delete') "  align="center">
        <template slot-scope="scope">
            <el-button
            v-if="hasPerm('param:upa')"
            type="text"
            icon="el-icon-edit"
            class="btn-sz"
            @click="updateParam(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
          v-if="scope.row.available && hasPerm('param:delete')"
            type="text"
            icon="el-icon-delete"
            class="red btn-sz"
            @click="changeStatu(scope.row,'禁用')"
            >禁用</el-button
          >
          <el-button
          v-if="!scope.row.available  && hasPerm('param:delete')"
            type="text"
            icon="el-icon-delete"
            class="red btn-sz"
            @click="changeStatu(scope.row,'启用')"
            >启用</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
          background
          layout="total, prev, pager, next"
          :current-page="queryInfo.pagenum"
          :page-size="queryInfo.pagesize"
          :total="pageTotal"
          @current-change="handlePageChange"
      ></el-pagination>
    </div>
    <!-- 对话框区域 -->
    <el-dialog v-dialogDrag width="710px" @close="blankAccount" :title="paramMap[dialogStatus]"  custom-class="paramDialog" :visible.sync="dialogFormVisible">
      <el-form :model="tempParam" status-icon   ref="accountForm"   label-position="left" label-width="100px" style='width: 460px; margin-left:20px; height:170px;'>
        <el-form-item   style='margin-botton: 10px;' label="参数项" >
          <el-input type="text" :disabled="dialogStatus == 'update' ? true : false" v-model="tempParam.paramKey" style="width: 250px;">
          </el-input>
        </el-form-item>
        <el-form-item  label="参数名称" >
          <el-input type="text" v-model="tempParam.paramName" style="width: 250px;">
          </el-input>
        </el-form-item>
        <el-form-item  label="状态" >
          <el-switch
          v-model="paramSwitch"
          active-text="启用"
          inactive-text="禁用"
          >
         </el-switch>
        </el-form-item>
      </el-form>
      <div>
        <el-button size="mini" type="success" style="margin-left:20px;" @click="addItem">添加子项</el-button>
      </div>
      <div class="itemBox">
        <el-table empty-text="暂无子项数据,请添加" class="accountTable" :data="parameterDialogList" height="220px">
         <el-table-column
        label=""
        width="60"
        align="center"
      >
       <template slot-scope="scope">
          <i class="el-icon-delete" @click="deleteItem(scope.row)"></i>
        </template></el-table-column>
        <el-table-column prop="paramValue" label="属性名"  align="center">
          <template slot-scope="scope">
            <el-input  placeholder="请输入属性名" v-model="parameterDialogList[scope.$index].paramValue" size="small "></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="paramField" label="属性值" align="center">
          <template slot-scope="scope">
            <el-input  placeholder="请输入属性值" v-model="parameterDialogList[scope.$index].paramField" size="small "></el-input>
          </template>
        </el-table-column>
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="blankAccount">取 消</el-button>
        <el-button v-if="dialogStatus=='create'" type="success" @click="createParam()">创 建</el-button>
        <el-button type="primary" v-else @click="editParam()">修 改</el-button> 
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { commonGetParamList, commonGetParamListAdd, commonGetParamListUpa, commonGetByParamKey,commonChangeByParamKey } from '../../../service/common'
export default {
  data() {
    return {
      parameterList:[],
      paramSwitch:false,
      parameterDialogList:[],
      paramMap: {
        update: '编辑参数',
        create: '新建参数'
      },
      dialogStatus:'create',
      queryInfo: {
        pagenum: 1,
        pagesize: 5,
      },
      pageTotal: 0,
      dialogFormVisible:false,
      tempParam: {
        paramKey:'', //paytype
        paramName:'', //支付方式
      }
    }
  },
  created() {
    this.getParmerterList()
  },
  methods: {
    // 获取参数列表
    async getParmerterList() {
      const res = await commonGetParamList(this.queryInfo)
      console.log('res获取参数列表: ', res);
      if (res.code == '200') {
        this.parameterList = res.sysUsers.records
        this.pageTotal = res.sysUsers.total
      }else {
        this.$message.error(res)
      }
      console.log('res参数返回: ', res);
    },
    // 添加按钮
    addParam() {
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
    },
    // 添加子项
    addItem() {
      let obj = {
        timestemp:+new Date()
      }
      this.parameterDialogList.push(obj)
    },
    // 删除子项
    deleteItem(row) {
      console.log('row:删除子项数据', row);
      console.log('row:this.parameterDialogList', this.parameterDialogList);
      const i = this.parameterDialogList.findIndex(item => {
        if (item.timestemp) {
          console.log('存在时间戳',item.timestemp,row.timestemp)
        return  item.timestemp == row.timestemp
        }else {
          console.log('不存在时间戳',item.paramValue,row.paramValue)
        return  item.paramValue == row.paramValue
        }
      })
      console.log('索引',i)
      this.parameterDialogList.splice(i,1)
    },
    // 编辑按钮
    async updateParam(index,row) {
      console.log(row,index)
      let param = {
        paramKey:row.paramKey
      }
      const res = await commonGetByParamKey(param)
      console.log('res编辑按钮: ', res);
      if (res.code == '200') {
       this.parameterDialogList = res.data
       if (res.data) {
         if(res.data[0].available) {
          this.paramSwitch = true
         }else {
         this.paramSwitch = false
         }
       }else {
         this.paramSwitch = false
       }
      }else {
        this.$message.error('commonGetByParamKey接口异常')
      }
      console.log('resupdateParam: ', res);
      this.tempParam.paramKey = this.parameterList[index].paramKey
      this.tempParam.paramName = this.parameterList[index].paramName
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
    },
    handlePageChange(val) {
      this.$set(this.queryInfo, 'pagenum', val);
      this.getParmerterList()
    },
    // 关闭对话框
    blankAccount() {
      this.dialogFormVisible = false
      this.tempParam.paramKey = ''
      this.tempParam.paramName = ''
      this.paramSwitch = false
      this.parameterDialogList = []
    },
    // 对话框保存按钮
    async createParam() {
      if (this.paramSwitch) {
        this.tempParam.available = 1
      }else {
        this.tempParam.available = 0
      }
      console.log(this.tempParam,'this.tempParam')
      console.log(this.parameterDialogList,'this.parameterDialogList')
      let param = []
      if (!!this.parameterDialogList) {
        this.parameterDialogList.forEach((item,index,arr) => {
          this.tempParam = {...this.tempParam,...arr[index]}
          console.log(this.tempParam,'合并过后的this.tempParam')
          param.push(this.tempParam)
        })
      }else {
        param.push(this.tempParam)
      }
      let params = {
        "sysParamList": JSON.stringify(param)
      }
      const res = await commonGetParamListAdd(params)
      console.log('res创建: ', res);
      if(res.code == 200) {
        this.getParmerterList()
        this.blankAccount()
      }else {
        this.$message.error(res.msg)
      }
      console.log('res:保存按钮 ', res);
    },
    // 对话框修改按钮
    async editParam() {
      if (this.paramSwitch) {
        this.tempParam.available = 1
      }else {
        this.tempParam.available = 0
      }
      console.log(this.tempParam,'this.tempParam')
      let param = []
      if (!!this.parameterDialogList) {
        this.parameterDialogList.forEach((item,index,arr) => {
            this.tempParam = {...arr[index],...this.tempParam,}
          param.push(this.tempParam)
        })
      }else {
        param.push(this.tempParam)
      }
      console.log(param,'传入参数')
      let params = {
        "sysParamList": JSON.stringify(param)
      }
      const res = await commonGetParamListUpa(params)
      console.log('res修改参数: ', res);
      if(res.code == 200) {
        this.getParmerterList()
        this.blankAccount()
      }else {
        this.$message.error(res.msg)
      }
      console.log('res:保存按钮 ', res);
    },
    // 改变状态
      changeStatu(row,state) {
      let available 
      if (row.available) {
        available = 0
      }else {
        available = 1
      }
        // 二次确认删除
        this.$confirm(`确定要${state}吗？`, '提示', {
            type: 'warning'
        })
        .then(async () => {
           let param = {
            paramKey:row.paramKey,
            available: available
           }
           console.log(param,'param改变状态')
            await commonChangeByParamKey(param)
            this.$message.success(`${state}成功`);
            this.getParmerterList()
        })
        .catch(() => {});
    },
  }
};
</script>
<style lang="less" scoped>
.paramterPage {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  padding-top: 15px;
  padding-left: 20px;
  background-color: #fff;

  .parameterTable {
    margin-top: 15px;
  }
  // .addParamBox {
  //   height: 60px;
  //   padding: 10px 0 10px 0;
  // }
   .pagination {
   margin: 10px 0;
   text-align: right;
 }
 .itemBox {
   height: 220px;
   overflow-y: auto;
   margin-top: 10px;
   margin-left: 20px;
 }
}
</style>